﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5实现web钢琴特效</title>
  <script src="js/zzsc.js"></script>
  <link href="css/zzsc.css" type="text/css" rel="stylesheet">
  <style type="text/css" media="screen">
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/jquery.backgroundvideo.min.js"></script>
  <script>
    $(document).ready(function () {
      var videobackground = new $.backgroundVideo($('body'), {
        "align": "centerXY",
        "width": 1280,
        "height": 720,
        "path": "media/",
        "filename": "cloud",
        "types": ["mp4", "ogg", "webm"]
      });
    });
  </script>
  <div id="all">
    <h1 style="width:100%;text-align:center;">请使用鼠标左键或键盘进行弹奏</h1>

    <!--主要代码-->
    <div id="main">
      <div id="key60" class="key whiteKey">
        <div class="tip">q&nbsp;a&nbsp;z</div>
      </div>
      <div id="key62" class="key whiteKey">
        <div class="tip">s&nbsp;x&nbsp;</div>
      </div>
      <div id="key64" class="key whiteKey">
        <div class="tip">d&nbsp;c</div>
      </div>
      <div id="key65" class="key whiteKey">
        <div class="tip">r&nbsp;f&nbsp;v</div>
      </div>
      <div id="key67" class="key whiteKey">
        <div class="tip">g&nbsp;b</div>
      </div>
      <div id="key69" class="key whiteKey">
        <div class="tip">h&nbsp;n</div>
      </div>
      <div id="key71" class="key whiteKey">
        <div class="tip">j&nbsp;m</div>
      </div>
      <div id="key72" class="key whiteKey">
        <div class="tip">i&nbsp;k&nbsp;,</div>
      </div>
      <div id="key61" class="key blackKey">
        <div class="tip_black">w</div>
      </div>
      <div id="key63" class="key blackKey">
        <div class="tip_black">e</div>
      </div>
      <div id="key66" class="key blackKey">
        <div class="tip_black">t</div>
      </div>
      <div id="key68" class="key blackKey">
        <div class="tip_black">y</div>
      </div>
      <div id="key70" class="key blackKey">
        <div class="tip_black">u</div>
      </div>
    </div>

    <div id="comment">
      <h3>弹奏方法</h3>
      <p><strong>使用鼠标左键点击钢琴键，或者键入钢琴键上输入的键盘文字。<br>支持浏览器：IE 9以上、Firefox 10以上、Chrome 17以上</strong></p>
      　　
    </div>
  </div>

</body>

</html>